import React, { useState, useEffect } from 'react';
import { history } from 'umi'
import { Tabs, Table, Tag, Button, Form, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import OperaPrompt from '@/components/OperaPrompt'
import request from '@/utils/request'
const { TabPane } = Tabs
const tabList = [
    {
        title: "全部",
        key: "1",

    },
    {
        title: "未开始",
        key: "2",
    },
    {
        title: "进行中",
        key: "3",
    },
    {
        title: "已结束",
        key: "4",
    },
    {
        title: "已失效",
        key: "5",
    },
];

const index = () => {
    const [tabKey, setTabKey] = useState("1")

    const [tableData, setTableData] = useState({
        list: [
            {
                id: 1,
                activity_title: "夏季狂热拼团",
                goods_logo: "http://uniapp.b2b2c.niuteam.cn/upload/1/common/images/20200417/20200417095436158708847607770.jpg",
                goods_title: "小狗（puppy）家用除螨无线挂式充电手持吸尘器T10 Cyclone",
                goods_price: "1900.20",
                join_num: 5,
                group_num: 2,
                man_buy_num: 2,

                start_time: "2020-06-04 12:32:00",
                end_time: "2020-07-04 12:32:00",
                status_title: "进行中"
            }
        ], total: 0
    })

    const columns: any = [
        {
            title: '活动名称',
            dataIndex: 'activity_title',
            render: (text: any, record: any) => text,
        },
        {
            title: '拼团商品',
            dataIndex: '-',
            render: (text: any, record: any) => <div style={{ display: "flex", alignItems: "center" }}>
                <img src={record.goods_logo} alt="" style={{ width: "64px", height: "64px" }} />
                {record.goods_title}
            </div>,
        },
        {
            title: '参团人数',
            dataIndex: 'join_num',
            render: (text: any) => text,
            align: "center",
        },
        {
            title: '开团团队',
            dataIndex: 'group_num',
            render: (text: any) => text,
            align: "center",
        },
        {
            title: '购买人数',
            dataIndex: 'man_buy',
            render: (text: any) => <Tag>{text}</Tag>,
            align: "center",
            width: "120px",
        },
        {
            title: '活动时间',
            dataIndex: '-',
            render: (text: any, record: any) => <div>
                <div>开始：{record.start_time}</div>
                <div>结束：{record.end_time}</div>
            </div>,
        },
        {
            title: '状态',
            width: "120px",
            dataIndex: 'status_title',
            align: "center",
            render: (text: any) => <Tag color="green">{text}</Tag>
        },
        {
            title: '操作',
            width: "160px",
            align: "center",
            render: (text: any, record: any) => (
                <>
                </>
            ),
        },
    ];
    const getList = (params: any = {}) => {
        request(`/promote/fight_group/list`, {
            params: { pageSize: 10, ...params },
        }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total });
        })
    };
    useEffect(() => {
        getList()
    }, [])
    return (
        <div>
            <OperaPrompt dataList={[
                "团购活动列表展示商品的团购相关信息"
            ]} />

            <div style={{ display: "flex", justifyContent: "space-between", padding: "5px 0" }}>
                <div>
                    <Button type="primary" onClick={() => {
                        history.push('/promote/shop/fight-group/0')
                    }}>添加拼团活动</Button>
                    <Button onClick={() => {
                        history.push('/promote/shop')
                    }} style={{ marginLeft: "6px" }}>返回</Button>
                </div>

                <Form
                    layout="inline"
                >
                    <Form.Item name="goodsTitle">
                        <Input placeholder="请输入商品名称" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary"><SearchOutlined /></Button>
                    </Form.Item>
                </Form>

            </div>

            <Tabs activeKey={tabKey} style={{ outline: "none" }} onChange={(activeKey) => {
                setTabKey(activeKey)
            }}>
                {
                    tabList.map((item: any) =>
                        <TabPane tab={item.title} key={item.key} style={{ outline: "none" }}>
                            {
                                tabKey === item.key &&
                                <Table
                                    rowKey="id"
                                    columns={columns}
                                    dataSource={tableData.list}
                                />
                            }

                        </TabPane>
                    )
                }
            </Tabs>
        </div>
    );
};

export default index;